<template>
  <div class="bread">
    <!-- transtion 动画标签对呀内层有多余div结构不生效 -->
    <!-- 只能用于router-view或者直接带有v-if的标签 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" v-if="title_show">
      <template>
        <!-- 面包屑只有最后一项应用动画 -->
        <el-breadcrumb-item
          v-for="(item, index) in $route.meta.bread"
          :key="index"
          :class="{ bread_animation: bread == item }"
          >{{ item }}</el-breadcrumb-item
        >
      </template>
    </el-breadcrumb>
    <!-- 模拟加载动画条 -->
    <!-- <div v-if="show" class="loading_line"></div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      bread: null,
      title_show: true,
    };
  },
  watch: {
    $route(to, from) {
      this.bread = to.meta.bread[to.meta.bread.length - 1];
      this.show = !this.show;
      this.title_show = !this.title_show;
      this.$nextTick(() => {
        this.title_show = !this.title_show;
      });
      setTimeout(() => {
        this.show = !this.show;
      }, 500);
      // console.log(to, from);
      // 强制页面刷新
      // this.$forceUpdate();
    },
  },
  mounted() {
    // console.log(this.$route);
  },
};
</script>

<style >
.bread {
  width: max-content;
  height: 100%;
  display: flex;
  align-items: center;
}
/* 面包屑动画 */
.bread_animation {
  animation-name: bread_animation;
  animation-duration: 0.5s;
}
/* 动画样式 */
/* .loading_line {
  background-color: #10aec2;
  height: 3px;
  position: fixed;
  top: 0;
  left: 0;
  animation-name: loading_line ;
  animation-duration: 0.5s;
} */
@keyframes bread_animation {
  0% {
    /* opacity: 1; */
    transform: translateX(0px);
  }
  50% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    /* opacity: 1; */
    transform: translateX(0px);
  }
}
@keyframes loading_line {
  0% {
    width: 0vw;
  }
  100% {
    width: 100vw;
  }
}
</style>